<template>
  <div>
    <div class="box" v-for="item in list">
      <p class="nickname">{{ item.activity_name }}【{{item.activity_sn}}】</p>
      <div class="between">
        <div class="time">
          <i class="iconfont icon-icon_time1"></i>
          <span>{{ item.start_date }}开始</span>
        </div>
        <span class="award">本期奖励：{{ item.static_income_rate }}%</span>
      </div>
      <div class="main-content">
        <div class="between">
          <span class="main-color">参与额度：{{ item.min_limit }}-{{ item.max_limit }}</span>
          <span class="main-color">剩余可兑：{{ item.can_participable_value }}</span>
        </div>
        <div class="between">
          <span class="main-color">已兑换数量：{{ item.member_participate_value }}</span>
          <span class="main-color">结算状态：{{ item.settle_name }}</span>
        </div>
        <div class="left main-color">兑换状态：{{item.status_name}}</div>
      </div>
      <div class="between">
        <div class="flex-1">
          <van-progress :percentage="(item.already_participate_total / item.target_value) * 100" track-color="#FEEDED"
            color="#F15353" :show-pivot="false" />
        </div>
        <span style="margin-left: 0.625rem;">{{ ((item.already_participate_total / item.target_value) * 100).toFixed(2) }}%</span>
      </div>
      <div class="between">
        <div >
          <div class="start-time" v-if="item.button.code == 'booking'">
            <span style="margin-right: 0.3125rem;">距离开始时间</span>
            <van-count-down :time="fun.getTimeDifference(item.start_time)" @finish="finish(item.id)">
              <template #default="timeData">
                  <template v-if="timeData.days>0">
                    <span class="fz-24">{{ timeData.days}}</span>
                    <span style="margin: 0 0.125rem;">天</span>
                  </template>
                  <span class="fz-24">{{ timeData.hours < 10 ? `0${timeData.hours}` : timeData.hours }}</span>
                  <span >:</span>
                  <span class="fz-24">{{ timeData.minutes < 10 ? `0${timeData.minutes}` : timeData.minutes }}</span>
                  <span >:</span>
                  <span class="fz-24">{{ timeData.seconds < 10 ? `0${timeData.seconds}` : timeData.seconds }}</span>
                  <span style="margin-left: 0.3438rem;"></span>
              </template>
            </van-count-down>
          </div>
          <div class="time">
            <i class="iconfont icon-icon_time1"></i>
            <span>{{ item.finish_date }}结束</span>
          </div>
        </div>
        <template v-if="item.button&&item.button.code == 'booking' ||item.button&&item.button.code == 'sign'">
        <van-button color="#F15353" round size="small" @click="confirm_handle(item)">{{item.button.name}}</van-button>
        </template>
        <template v-else>
          <van-button color="#D6D6DC" disabled  round size="small">{{item.button&&item.button.name}}</van-button>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['datas'],
  data() {
    return {
      list:[]
    };
  },
  methods: {
    confirm_handle(data) {
      this.$emit('confirm_handle',data)
    },
    finish(id) {
      this.$emit("finish",id)
    },
  },
  watch:{
    "datas":{
      handler(newV,oldV){
        console.log(newV,"newV======");
        if(newV && newV.length!==0){
          this.list = newV;
        }
      },
      deep:true,
      immediate:true
    }
  }
};
</script>

<style scoped lang="scss">
.start-time {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  margin-bottom: 0.5938rem;
  text-align: left;
}

.fz-24 {
  font-size: 0.75rem;
}

.left {
  text-align: left;
}

.main-color {
  color: #bababa;
}

.main-content {
  color: #3b3b4a;
  background: #fafafa;
  border-radius: 0.625rem;
  padding: 0.75rem 0.625rem;
  margin: 0.625rem 0;
}

.flex-1 {
  flex: 1;
}

.award {
  font-size: 0.75rem;
  font-weight: 400;
  color: #00001c;
}

.time {
  color: #f15353;
  background: #feeded;
  padding: 0.2813rem 0.5rem;
  border-radius: 0.9375rem;
  font-size: 0.75rem;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.box {
  padding: 0.7813rem;
  background: #fff;
  border-radius: 0.625rem;
  margin: 0.625rem 0.9375rem;
}

.nickname {
  color: #101010;
  font-weight: bold;
  font-size: 0.9375rem;
  text-align: left;
  margin-bottom: 0.6563rem;
}

.between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
